import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  PixelRatio,
  TouchableOpacity,
  Image,
  Platform
} from 'react-native';

import ImagePicker from 'react-native-image-picker';
var Title = require('./Title');
var query = require('./Query').query;
class ChoosePhoto extends React.Component {

  state = {
    avatarSource: g_avatar,
  };

  selectPhotoTapped() {
    const options = {
      title: '请选择图像来源',
      takePhotoButtonTitle: '拍照',
      chooseFromLibraryButtonTitle: '从手机相册选择',
      cancelButtonTitle: '取消',
      quality: 0.5,
      maxWidth: 240,
      maxHeight: 240,
      allowsEditing: true,
      storageOptions: {
      skipBackup: true
    }
  };

  ImagePicker.showImagePicker(options, (response) => {
    console.log('Response = ', response);

    if (response.didCancel) {
      console.log('User cancelled photo picker');
    }
    else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    }
    else if (response.customButton) {
      console.log('User tapped custom button: ', response.customButton);
    }
    else {
      var source;
      // You can display the image using either:
      source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};
      storage.save({
          key: 'avatar',  //注意:请不要在key中使用_下划线符号!
          id:this.props.user.phone,
          rawData: {data:source},
          expires: null
        });

      this.setState({
        avatarSource: source
      });

      //上传头像图片到服务器
      query.uploadAvatar(this.props.user.phone,source.uri,this,function(owner,response){
        console.log("上传结果：" + response.success ? "成功" : "失败");
        if(response.success != true){
          console.log("失败原因：" + response.error);
        }
      })

      global.g_avatar = source;
      //通过回调通知父视图修改头像图片
      this.props.onChangePhoto();
    }
    });
  }

  _onPressReturn(){
    this.props.navigator.pop();
  }

  render() {
    return (
      <View style={styles.container}>
        <Title title={{left:"返回",center:("修改头像"),leftAct:this._onPressReturn.bind(this)}}></Title>
        <View style={styles.subContainer}>
          <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
            <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
            { this.state.avatarSource === null ? <Text>请选择头像</Text> :
              <Image style={styles.avatar} source={this.state.avatarSource} />
            }
            </View>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eeeeee'
  },
  subContainer:{
    flex:1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatarContainer: {
    borderColor: '#9B9B9B',
    borderWidth: 1 / PixelRatio.get(),
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatar: {
    borderRadius: 90,
    width: 180,
    height: 180
  }
});

module.exports = ChoosePhoto;